<template>
  <div class="loading_container">
      <div class="load_img" :style="'background-position:0'+offY*-2.5+'rem'"></div>
      <svg class="load_ellipse" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <ellipse cx="26" cy="10" rx="26" ry="10" style="fill:#ddd;stroke:none;"></ellipse>
    </svg>
  </div>
</template>

<script>
export default {
    data(){
        return {
            offY:0,
            timer:null
        }
    },
    mounted(){
        this.timer = setInterval(() => {
            if(this.offY==6){
                this.offY=0
            }else{
                this.offY++;
            }
        }, 600);
    },
    beforeDestroy(){
        if(this.timer){
            clearInterval(this.timer);
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.loading_container{
    position: fixed;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    @include wh(2.5rem, 2.5rem);
}
@keyframes loadImg {
    0% {
        transform: translateY(-50%);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 0;
    }
}
@keyframes ellipse {
    0%   {transform: scale(1);}
    50%  {transform: scale(0.3);}
    100% {transform: scale(1);}
}
.load_img{
    @include wh(100%,100%);
    background: url('../../assets/imgs/icon_loading.png') no-repeat 0 0;
    background-size: 100%;
    transform: translateY(0);
    animation: loadImg .6s infinite ease-in;
}
.load_ellipse{
    position: absolute;
    @include wh(2.6rem, 2rem);
    top: 2.2rem;
    left: 0.2rem;
    z-index: 50;
    animation: ellipse 0.6s infinite ease-in;
}
</style>